<template>
    <div class="vocabularyBook">
        <div class="topBox">
            <div class="topBox_left">
                <div class="btn" @click="handleassignWords">
                    布置单词
                </div>
                <div class="phb" @click="handleShowPh">
                    单词量排行
                </div>
            </div>

            <div class="topBox_right" @click="handleDownSheet">
                <img src="@/static/image/xz.png" alt="" srcset="">
                <div class="tip">
                    下载学生自测单词表
                </div>
            </div>
        </div>


        <div class="studentList">
            <div class="lableContent">
                <div class="" style="width: 5%;">
                    序号
                </div>
                <div class="" style="width: 29%;">
                    词书
                </div>
                <div class="" style="width: 8%;">
                    词汇量
                </div>
                <div class="" style="width: 8%;">
                    布置对象
                </div>
                <div class="" style="width: 8%;">
                    背完1轮学生
                </div>
                <div class="" style="width: 8%;">
                    背完3轮学生
                </div>
                <div class="" style="width: 10%;">
                    布置日期
                </div>
                <div class="" style="width: 8%;">
                    背词顺序
                </div>
                <div class="" style="width:8%;">
                    操作
                </div>
                <div class="" style="width: 8%;">
                    已被单词表
                </div>
            </div>

            <div class="listContent">
                <div class="listitem" v-for="(item, index) in 10" :key="index">
                    <div style="width: 5%">{{ index + 1 }}</div>
                    <div style="width: 29%;">
                        小学同步-人教PEP版-五年级-上册、下册
                    </div>
                    <div style="width: 8%;">
                        225
                    </div>
                    <div style="width: 8%;color: #3FB9E2;">
                        5
                    </div>
                    <div style="width: 8%;color: #3FB9E2;">
                        3
                    </div>
                    <div style="width:8%;color: #3FB9E2;">
                        8
                    </div>
                    <div style="width: 10%;">
                        6月26日 星期三
                    </div>
                    <div style="width: 8%;">
                        <div style="color: #4BA840;">
                            已置顶
                        </div>
                    </div>
                    <div style="width: 8%;color: #3FB9E2;">
                        撤销
                    </div>
                    <div style="width: 8%;color: #3FB9E2;">
                        下载
                    </div>
                </div>
            </div>

        </div>

        <div class="pageBox">
            <el-pagination @current-change="handleCurrentChange" background :current-page.sync="pageInfo.limit"
                :page-size="pageInfo.limit" layout="total, prev, pager, next" :total="pageInfo.total">
            </el-pagination>
        </div>



        <el-dialog :visible.sync="phShow" width="30%" center :show-close="false">
            <div class="phContent">
                <div class="topBox">
                    <div class="title">
                        排行榜
                    </div>
                    <div class="closecontent" @click="phShow = false">
                        <i class="el-icon-close"></i>
                    </div>
                </div>

                <div class="className">
                    <div class="lable">班级名称：</div>
                    <div class="value">一二阶教学部</div>
                </div>


                <div class="listContent">

                    <div class="lableBox">
                        <div style="width: 10%;">
                            排名
                        </div>
                        <div style="width: 80%;">
                            学生
                        </div>
                        <div style="width: 10%;">
                            单词量
                        </div>
                    </div>

                    <div class="itemList">
                        <div class="list_content" v-for="(item, index) in 9" :key="index">
                            <div style="width: 10%;">
                                <img v-if="index == 0" src="@/static/image/ph01.png" class="icon" alt="" srcset="">
                                <img v-if="index == 1" src="@/static/image/ph02.png" class="icon" alt="" srcset="">
                                <img v-if="index == 2" src="@/static/image/ph03.png" class="icon" alt="" srcset="">
                                <div v-if="index > 2" class="xh">
                                    {{ index + 1 }}
                                </div>
                            </div>
                            <div class="student" style="width: 80%;">
                                <img src="@/static/image/logo.png" alt="" srcset="">
                                <div>妍与韩</div>

                            </div>
                            <div style="width: 10%;">
                                1220
                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
            pageInfo: {
                page: 1,
                limit: 10,
                total: 100,
            },
            phShow: false,
        }
    },
    methods: {
        handleassignWords() {
            this.$router.push({ name: "assignWords" })
        },
        handleShowPh() {
            this.phShow = true
        },
        handleDownSheet() {
            this.$router.push({ name: "downloadSheet" })
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
        },
    }
}
</script>

<style scoped lang="scss">
.vocabularyBook {
    width: 100%;
    height: 654px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    margin-top: 16px;
    padding: 16px;
    box-sizing: border-box;
    position: relative;

    .topBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .topBox_left {
            display: flex;
            align-items: center;

            .btn {
                width: 140px;
                height: 40px;
                background: #4BA840;
                border-radius: 4px 4px 4px 4px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #FFFFFF;
                line-height: 40px;
                text-align: center;
                cursor: pointer;

            }

            .phb {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #3FB9E2;
                line-height: 20px;
                margin-left: 12px;
                cursor: pointer;

            }
        }

        .topBox_right {
            display: flex;
            align-items: center;
            cursor: pointer;

            img {
                width: 32px;
                height: 32px;
            }

            .tip {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #3FB9E2;
                line-height: 20px;
                margin-left: 6px;
            }
        }
    }


    .studentList {
        width: 100%;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        padding: 16px;
        box-sizing: border-box;
        // margin-top: 16px;

        .lableContent {
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
            line-height: 20px;
        }

        .listContent {
            .listitem {
                display: flex;
                align-items: center;
                height: 52px;
                background: #FFFFFF;
                border-top: 1px solid #E7E7E7;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.9);
                line-height: 20px;
                cursor: pointer;

                .userinfo {
                    display: flex;
                    align-items: center;
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 40px;
                    margin-right: 12px;
                }
            }

            .listitem:hover {
                background-color: #EAF9E8;
            }
        }
    }

    .pageBox {
        position: absolute;
        bottom: 5px;
        right: 60px;
    }


    .phContent {
        width: 587px;
        height: 431px;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;

        .topBox {
            width: 100%;
            height: 56px;
            background: #4BA840;
            border-radius: 8px 8px 0px 0px;
            position: relative;

            .title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 56px;
                width: 100%;
                text-align: center;
            }

            .closecontent {
                color: #ffffff;
                font-size: 15px;
                position: absolute;
                right: 10px;
                cursor: pointer;
            }
        }


        .className {
            display: flex;
            align-items: center;
            margin: 20px;

            .lable {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #777777;
                line-height: 14px;
            }

            .value {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 16px;
                text-align: left;
                margin-left: 20px;
            }
        }


        .listContent {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;

            .lableBox {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.4);
                line-height: 20px;
                display: flex;
                align-items: center;
            }

            .itemList {
                height: 260px;
                overflow: auto;
                -ms-overflow-style: none;
                /* IE 和 Edge */
                scrollbar-width: none;
                /* Firefox */

                .list_content {
                    display: flex;
                    align-items: center;
                    height: 52px;
                    background: #FFFFFF;
                    border-top: 1px solid #E7E7E7;
                    cursor: pointer;

                    .icon {
                        width: 28px;
                        height: 28px;
                    }

                    .xh {
                        padding-left: 12px;
                        box-sizing: border-box;
                    }

                    .student {
                        display: flex;
                        align-items: center;

                        img {
                            width: 40px;
                            height: 40px;
                        }
                    }
                }

                .list_content:hover {
                    background-color: #EAF9E8;
                }

            }
        }


    }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #4BA840;
}

::v-deep .el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #4BA840;
}

::v-deep .el-dialog {
    background-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
}
</style>